import React from 'react';
import PropTypes from 'prop-types';

import './index.css';
export default class TodoList extends React.Component {
  static propTypes = {
    todos: PropTypes.object.isRequired,
    updateAllTodo: PropTypes.func.isRequired,
    delAllTodo: PropTypes.func.isRequired
  };

  handleCheck = e => {
    const {
      target: { checked }
    } = e;
    const { updateAllTodo } = this.props;
    updateAllTodo(checked);
  };
  handleDel = () => {
    const { todos, delAllTodo } = this.props;
    const checkFlag = todos.some(v => v.done === true);
    if (!checkFlag) {
     return alert('没有已完成任务');
    }
    if (window.confirm('确认删除已完成任务吗？')) {
      delAllTodo();
    }
  };
  render() {
    const { todos } = this.props;
    const checkFlag = todos.some(v => v.done === false);
    const count = todos.filter(v => v.done);

    return (
      <div className="footer-box">
        <span>
          <input type="checkbox" name="" id="" checked={todos.length !== 0 && !checkFlag} disabled={!todos.length} onChange={this.handleCheck} />
          <span>
            已完成{count.length}/全部{todos.length}
          </span>
        </span>
        <button className="btn btn btn-danger" onClick={this.handleDel}>
          清除已完成的任务
        </button>
      </div>
    );
  }
}
